<template>
  <el-dialog :visible.sync="dialogVisible" :append-to-body="true" :title="title" width="800px" @close="onClose">
    <div class="viewer-context" style="height: 100%; overflow-x: hidden">
      <el-scrollbar style="width: 100%; height:100%">
        <div v-for="(item,index) in form.pageCount" :key="index">
          <el-image :src="'/api/anon/load?id=' + form.id + '&pageId=' + (item + 1)"></el-image>
        </div>
      </el-scrollbar>
    </div>
  </el-dialog>
</template>

<script>
import { view } from '@/api/sysFile'

export default {
  data() {
    return {
      dialogVisible: false,
      title: '',
      form: {
        id: '',
        name: '',
        pageCount: ''
      }
    }
  },
  mounted() {
  },
  methods: {
    init() {
      if (this.form.id) {
        view(this.form.id).then((res) => {
          if (res && res.code === 20000) {
            this.form.pageCount = res.data.pageCount
            this.form.name = res.data.name
          }
        })
      }
    },
    onShow(id) {
      if (id) {
        this.form.id = id
        this.title = '附件预览'
        this.init()
      }
      this.dialogVisible = true
    },
    onClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>

.viewer-context {
  overflow-x: hidden !important;
  height: 400px !important;
}

/deep/ .el-scrollbar__wrap {
  overflow-x: hidden !important;
}

/deep/ .el-scrollbar__bar.is-horizontal {
  display: none;
}

</style>
